<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 22:10:43
-->
<template>
  <div>
    <!-- 返回按钮 -->
    <el-page-header @back="$router.go(-1)">
    </el-page-header>
    <!-- {{ empData }} -->
    <!-- 头部开始 -->
    <div class="head">
      工单详情
    </div>
    <!-- 头部结束 -->
    <!-- 体部开始 -->
    <div class="content">
      <!-- 上半部分 -->
      <div class="content_top">
        <!-- 上半部分左边 -->
        <div class="content_top_left">
          <div class="charts">
            <div class="chart1">工程名称</div>
            <div class="chart2">{{ empData.engineer_name }}</div>
          </div>
          <div class="charts">
            <div class="chart1">设备名称</div>
            <div class="chart2">{{ empData.device_name }}</div>
          </div>
          <div class="charts">
            <div class="chart1">创建时间</div>
            <div class="chart2">{{ empData.create_time | fmtTime }}</div>
          </div>
          <div class="charts">
            <div class="chart1">完成时间</div>
            <div class="chart2">{{ empData.finish_time | fmtTime }}</div>
          </div>
        </div>
        <!-- 上半部分右边 -->
        <div class="content_top_right">
          <div class="charts">
            <div class="chart1">工单状态</div>
            <div class="chart2">{{ empData.status }}</div>
          </div>
          <div class="charts">
            <div class="chart1">工单类型</div>
            <div class="chart2">{{ empData.type }}</div>
          </div>
          <div class="charts">
            <div class="chart1">接单人员</div>
            <div class="chart2">{{ empData.account_name }}</div>
          </div>
          <div class="charts">
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="content_bottom">
        <div class="head1">报修原因描述</div>
        <div class="chart">{{ empData.bill_why }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/utils';
export default {
  data() {
    return {
      // 工单详情数据
      empData: {},
    };
  },
  computed: {},
  methods: {},
  created() {
    // 路由接收传递的参数
    console.log(this.$route.query);
    this.empData = { ...this.$route.query };
  },
  mounted() { },
};
</script>
<style lang="scss">
// 头部样式
.head {
  border-radius: 10px;
  height: 50px;
  font-weight:bold;
  background-color: pink;
  // 字体大小
  font-size: 40px;
  color: white;
}
// 体部样式
.content {
  height: calc(100vh - 60px);
  // 更改主轴方向
  flex-direction: column;
  display: flex;
  // 上半部分样式
  .content_top{
    margin: auto;
    width: 95%;
    flex: 2;
    display: flex;
    // 左和右半边样式
    .content_top_left,.content_top_right{
      flex: 1;
      display: flex;
      flex-direction: column;
      // background-color: red;
      .charts{
        flex: 1;
        // 更改主轴方向
        // flex-direction: column;
        display: flex;
        font-size: 20px;
        padding-top: 30px;
        .chart1{
          flex: 1;
          display: flex;
          font-size: 20px;
          // padding-top: 30px;
          // margin: auto;
          font-weight:bold;
        }
        .chart2{
          flex: 2;
          display: flex;
          font-size: 20px;
          // padding-top: 30px;
          text-align: center;
        }
      }
    }
  }
  // 下半部分样式
  .content_bottom{
    flex: 1;
    .head1 {
      border-radius: 10px;
      height: 30px;
      font-weight:bold;
      background-color: pink;
      // 字体大小
      font-size: 25px;
      color: white;
    }
    .chart{
      margin: auto;
      width: 90%;
      font-size: 20px;
      padding-top: 30px;
    }
  }
}
</style>